<template>
  <div class="f-tag-list" :style="{ left: $store.state.asideWidth }">
    <el-tabs
      v-model="editableTabsValue"
      type="card"
      class="flex-1"
      style="min-width: 100px"
      @tab-change="tabChange"
      @tab-remove="removeTab"
    >
      <el-tab-pane
        v-for="item in editableTabs"
        :key="item.path"
        :label="item.title"
        :name="item.path"
        :closable="item.path != '/'"
      ></el-tab-pane>
    </el-tabs>

    <span class="tag-btn">
      <el-dropdown @command="handleClose">
        <span class="el-dropdown-link">
          <el-icon>
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="clearOther">关闭其他</el-dropdown-item>
            <el-dropdown-item command="clearAll">全部关闭</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </span>
  </div>
  <div class="h-40px"></div>
</template>

<script setup>
// 标签页方法已经封装到了useTabList.js中
// import { ref } from 'vue'
// import { useRoute, onBeforeRouteUpdate } from 'vue-router'
// import { router } from '../../router'
// import { useCookies } from '@vueuse/integrations/useCookies'

// const route = useRoute()
// const cookie = useCookies()
// const editableTabsValue = ref(route.path) //  当前激活的标签页
// const editableTabs = ref([
//   {
//     title: '后台首页',
//     path: '/'
//   }
// ])

// // 监听路由变化
// onBeforeRouteUpdate(to => {
//   const index = editableTabs.value.findIndex(tab => tab.path === to.path)
//   if (index === -1) {
//     addTab(to)
//   }
//   editableTabsValue.value = to.path
// })
// // 自动添加标签tabs
// const addTab = to => {
//   editableTabs.value.push({
//     title: to.meta.title,
//     path: to.path
//   })
//   cookie.set('tabList', editableTabs.value)
// }
// // tabs点击跳转
// const tabChange = a => {
//   editableTabsValue.value = a
//   router.push(a)
// }
// // tabs点击删除
// const removeTab = t => {
//   let tabs = editableTabs.value
//   let a = editableTabsValue.value
//   if (a == t) {
//     tabs.forEach((tab, index) => {
//       if (tab.path == t) {
//         let nextTab = tabs[index + 1] || tabs[index - 1]
//         if (nextTab) {
//           a = nextTab.path
//         }
//       }
//     })
//   }
//   editableTabsValue.value = a
//   editableTabs.value = editableTabs.value.filter(tab => tab.path != t)
//   cookie.set('tabList', editableTabs.value)
// }

// // 初始化标签导航列表
// const initTabList = () => {
//   let tbs = cookie.get('tabList')
//   if (tbs) {
//     editableTabs.value = tbs
//   }
// }
// initTabList()

// // 处理全部关闭和关闭其他
// const handleClose = c => {
//   if (c === 'clearOther') {
//     // 过滤当前标签（只剩下首页和当前页）
//     editableTabs.value = editableTabs.value.filter(
//       tab => tab.path == '/' || tab.path == editableTabsValue.value
//     )
//   } else if (c === 'clearAll') {
//     // 切换回到首页
//     editableTabsValue.value = '/'
//     // 过滤只剩下首页
//     editableTabs.value = [
//       {
//         title: '后台首页',
//         path: '/'
//       }
//     ]
//   }
//   cookie.set('tabList', editableTabs.value)
// }
import { useTabList } from '@/composables/useTabList'
const { editableTabsValue, editableTabs, tabChange, removeTab, handleClose } =
  useTabList()
</script>

<style lang="scss" scoped>
.f-tag-list {
  @apply fixed bg-gray-100 flex items-center px-2;
  top: 60px;
  right: 0;
  height: 44px;
  z-index: 100;
}
.tag-btn {
  @apply bg-white rounded ml-auto flex items-center justify-center px-2;
  height: 32px;
}
:deep(.el-tabs__header) {
  border: 0 !important;
  @apply mb-0;
}
:deep(.el-tabs__nav) {
  border: 0 !important;
}
:deep(.el-tabs__item) {
  border: 0 !important;
  height: 32px;
  line-height: 32px;
  @apply bg-white mx-1 rounded;
}
:deep(.el-tabs__nav-next),
:deep(.el-tabs__nav-prev) {
  line-height: 32px;
  height: 32px;
}
:deep(.is-disabled) {
  cursor: not-allowed;
  @apply text-gray-300;
}
</style>
